<template>
  <div class="home">
    <div class="box">
        <div @click="sce(x.designKindId)" class="list" v-for="x,i in scene" :key="i">
            <img class="ig" :src="x.thumbUrl" alt="">
            {{ x.name }}
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            scene:[]
        }
    },
    created(){
        this.fb()
    },
    methods:{
        fb(){
           this.$http.get('/api/mobile/main/getMainMiniProgramHomeInfo.do?_dataType=json&_dataClientType=3&client_type=40&business_type=1%2C2%2C3').then(res=>{
            this.scene=res.data.body.data.scene.splice(0,8)
            console.log(this.scene);
           })
        },
        sce(x){
            this.$router.push({
                path:'/room',
                query:{
                    id:x
                }
            })
        }
    }
}
</script>

<style scoped>
    .box{
        width: 100%;
        height: 4.12rem;
        margin: .43rem 0 0 0 ;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: .4rem;
        justify-content: flex-start;
        border-bottom: 4px solid #f7f9fb;
    }
    .list{
        box-sizing: border-box;
        flex: 1;
        font-size: 0.25rem;
        width: calc(100%/4);
        min-width: calc((100%) / 4);
        max-width: calc((100%) / 4);
        min-height: calc((100%) / 1.9);
        max-height: calc((100%) / 1.9);
        text-align: center;
        line-height: 1rem;
        color: #4b4a4a;
    }
    .ig{
        width: 1.1rem;
        display: block;
        margin: auto;
    }
</style>